<style>
</style>

<template>
  <div class="__user-view-con">
    <Card>
      <!-- 搜索 -->
      <head-tool @on-add-user="handleAddUser"/>

      <!-- 表格 -->
      <user-table :data="page.data"
                  :loading="tableLoading"
                  @on-update-remark="handleUpdateRemark"
                  @on-update-user="handleUpdateUser"
                  @on-remove-user="handleRemoveUser"/>

      <Row type="flex" justify="end" style="margin-top: 20px;">
        <Col>
          <!-- 分页 -->
          <Page :current.sync="page.current"
                :page-size="page.pageSize"
                :total="page.total"
                @on-change="_handlePageChange"></Page>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import HeadTool from './component/head-tool'
  import UserTable from './component/table'
  import {mapState, mapActions} from 'vuex'
  import {_ChildLoading} from '_libs/util'

  export default {
    name: 'UserView',
    data() {
      return {
        page: {
          current: 1,
          pageSize: 14,
          total: 0,
          data: []
        },
        tableLoading: false
      }
    },
    computed: {
      ...mapState('system', {
        tableData: state => {
          return state.user.userList.filter(user => {
            let roleNames = ''
            user.roles.forEach((role, index) => {
              roleNames += role.name
              if (index < user.roles.length - 1) {
                roleNames += ', '
              }
            })
            user.roleNames = roleNames
            return user;
          })
        }
      })
    },
    methods: {
      ...mapActions('system/user', [
        'listUser',
        'removeUser',
        'updateRemark',
        'updateUser',
        'addUser'
      ]),
      ...mapActions('system/user/role', [
        'listRole'
      ]),

      // 更改分页数据
      changePageData() {
        let page = this.page
        page.data = []
        let start = (page.current - 1) * page.pageSize;
        let end = start + page.pageSize
        if (end >= this.tableData.length) {
          page.data = this.tableData.slice(start)
        }
        page.data = this.tableData.slice(start, end)
      },

      // 分页组件事件
      _handlePageChange() {
        this.changePageData();
      },

      // 处理更新备注
      handleUpdateRemark(newRemark, user, loadingCb) {
        let res = this.updateRemark({
          id: user.id,
          remark: newRemark
        })

        _ChildLoading(res, () => {
          this.$Message.success('更新备注成功')
        }, loadingCb)
      },

      // 处理更新用户
      handleUpdateUser(userForm, loadingCb) {

        let res = this.updateUser(userForm);

        _ChildLoading(res, () => {
          this.changePageData()
          this.$Message.success('更新用户信息成功')
        }, loadingCb)

      },

      // 处理删除用户
      handleRemoveUser(user, loadingCb) {
        let res = this.removeUser(user.id);

        _ChildLoading(res, () => {
          this.changePageData();
          this.$Message.success('删除成功');
        }, loadingCb)
      },

      // 添加用户
      handleAddUser(user, loadingCb) {

        let res = this.addUser(user);

        _ChildLoading(res, () => {
          this.changePageData()
          this.$Message.success('添加成功');
        }, loadingCb)
      }
    },
    created() {
      this.tableLoading = true
      // 获取所有用户
      this.listUser().then(data => {
        this.page.total = data.length;
        this.changePageData();
        this.tableLoading = false
      })

      this.listRole()
    },
    components: {
      HeadTool,
      UserTable
    }
  }
</script>
